<template>
  <div class="submission-materials">
    <!-- 材料提交状态卡片 -->
    <el-card class="status-card" v-if="submission_status !== null">
      <template #header>
        <div class="status-header">
          <span>报名材料状态</span>
          <el-tag :type="getStatusType" effect="dark">{{ getStatusText }}</el-tag>
        </div>
      </template>
      <div class="status-content">
        <el-timeline v-if="submission_status !== 0">
          <el-timeline-item
            :type="submission_status >= 1 ? 'primary' : 'info'"
            timestamp="材料提交"
          >
            已提交报名材料，等待审核
          </el-timeline-item>
          <el-timeline-item 
            :type="getTimelineType"
            timestamp="审核状态"
          >
            {{ getTimelineText }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

    <!-- 退回原因提示 -->
    <el-alert
      v-if="submission_status === 3"
      title="材料已退回，请查看退回原因并重新提交"
      type="warning"
      :closable="false"
      show-icon
      class="reject-alert"
    >
      <template #default>
        <p class="reject-reason">退回原因：{{ rejectReason }}</p>
      </template>
    </el-alert>

    <el-card class="form-card">
      <h2>报名材料提交</h2>
      <el-form :model="formData" :rules="rules" ref="materialForm" label-width="120px">
        <el-form-item label="报名材料ID" prop="material_id">
          <el-input v-model="formData.material_id" disabled></el-input>
        </el-form-item>
        
        <el-form-item label="报名登记ID" prop="registration_id">
          <el-input v-model="formData.registration_id" disabled></el-input>
        </el-form-item>

        <el-form-item label="身份证正面" prop="id_card_front">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :on-success="handleFrontSuccess"
            :before-upload="beforeUpload"
            :disabled="submission_status === 1 || submission_status === 2"
            :limit="1">
            <el-button type="primary" :disabled="submission_status === 1 || submission_status === 2">上传身份证正面照片</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="身份证背面" prop="id_card_back">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :on-success="handleBackSuccess"
            :before-upload="beforeUpload"
            :disabled="submission_status === 1 || submission_status === 2"
            :limit="1">
            <el-button type="primary" :disabled="submission_status === 1 || submission_status === 2">上传身份证背面照片</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="证件照" prop="photo">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :on-success="handlePhotoSuccess"
            :before-upload="beforeUpload"
            :disabled="submission_status === 1 || submission_status === 2"
            :limit="1">
            <el-button type="primary" :disabled="submission_status === 1 || submission_status === 2">上传证件照</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitForm"
            :disabled="submission_status === 1 || submission_status === 2"
          >提交材料</el-button>
          <el-button 
            @click="resetForm"
            :disabled="submission_status === 1 || submission_status === 2"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SubmissionMaterials',
  data() {
    return {
      submission_status: 0, // 默认未提交
      rejectReason: '', // 退回原因
      formData: {
        material_id: '',
        registration_id: '',
        id_card_front: '',
        id_card_back: '',
        photo: '',
        submitted_at: ''
      },
      rules: {
        id_card_front: [
          { required: true, message: '请上传身份证正面照片', trigger: 'change' }
        ],
        id_card_back: [
          { required: true, message: '请上传身份证背面照片', trigger: 'change' }
        ],
        photo: [
          { required: true, message: '请上传证件照', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    getStatusType() {
      const statusMap = {
        0: 'info',
        1: 'warning',
        2: 'success',
        3: 'danger'
      }
      return statusMap[this.submission_status]
    },
    getStatusText() {
      const statusMap = {
        0: '未提交',
        1: '待审核',
        2: '已通过',
        3: '已退回'
      }
      return statusMap[this.submission_status]
    },
    getTimelineText() {
      const textMap = {
        1: '材料正在审核中',
        2: '材料审核通过',
        3: '材料审核未通过，请查看退回原因'
      }
      return textMap[this.submission_status] || ''
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPGOrPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPGOrPNG && isLt2M
    },
    handleFrontSuccess(response) {
      this.formData.id_card_front = response.url
      this.$message.success('身份证正面上传成功')
    },
    handleBackSuccess(response) {
      this.formData.id_card_back = response.url
      this.$message.success('身份证背面上传成功')
    },
    handlePhotoSuccess(response) {
      this.formData.photo = response.url
      this.$message.success('证件照上传成功')
    },
    submitForm() {
      this.$refs.materialForm.validate(async (valid) => {
        if (valid) {
          try {
            this.formData.submitted_at = new Date().toISOString()
            // 这里添加提交到后端的逻辑
            await this.$axios.post('/api/submission-materials', this.formData)
            this.$message.success('材料提交成功')
            // 提交成功后更新状态
            this.fetchSubmissionStatus()
          } catch (error) {
            this.$message.error('提交失败，请重试')
          }
        } else {
          this.$message.error('请完善所有必填信息')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.materialForm.resetFields()
    },
    // 获取时间线项的类型
    getTimelineType() {
      if (this.submission_status === 3) return 'danger'
      if (this.submission_status === 2) return 'success'
      if (this.submission_status === 1) return 'warning'
      return 'info'
    },
    // 获取提交状态
    async fetchSubmissionStatus() {
      try {
        const response = await this.$axios.get('/api/submission/status')
        this.submission_status = response.data.status
        if (this.submission_status === 3) {
          this.rejectReason = response.data.rejectReason
        }
      } catch (error) {
        this.$message.error('获取提交状态失败')
      }
    }
  },
  created() {
    // 组件创建时获取提交状态
    this.fetchSubmissionStatus()
  }
}
</script>

<style scoped>
.submission-materials {
  padding: 20px;
}

.status-card {
  margin-bottom: 20px;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-content {
  padding: 10px 0;
}

.reject-alert {
  margin-bottom: 20px;
}

.reject-reason {
  margin: 10px 0 0;
  color: #f56c6c;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.upload-demo {
  width: 100%;
}

.el-upload__tip {
  color: #909399;
}
</style>